<template>
  <div>
    <a-form class="headerSerch" layout="inline">
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <a-button v-action:add style="float: left; margin-top: 10px" @click="showModal()" type="primary">新增</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="menuList"
      class="components-table-demo-nested"
      :pagination="false"
    >
      <a slot="operation" slot-scope="text,record">
        <a-button v-action:update @click="showModal(record)" type="primary">编辑</a-button>
        <a-popconfirm
          title="Are you sure delete this record?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="removeMenu(record)"
        >
          <a-button v-action:delete type="danger">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
    <a-pagination
      v-model="queryParams.page"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="queryParams.limit"
      class="pagination"
      @showSizeChange="onShowSizeChange"
      @change="changePage"
      :show-total="(total, range) => `共${total}条`"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>

    <AddModal
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :menuOptionList="menuOptionList"
      :current="current"
    />
  </div>
</template>

<script>
import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/manage'
import { isNotEmptyList } from '@/utils/util'
import AddModal from './addModal.vue'
import { mapState } from 'vuex'
export default {
  components: {
    AddModal
  },
  computed: {
    ...mapState({
      pageSizeOptions: state => state.user.pageSizeOptions
    })
  },
  data () {
    return {
      columns: [
        { title: 'id', dataIndex: 'id', key: 'id' },
        { title: '导航名', dataIndex: 'name', key: 'name' },
        { title: '导航中文名', dataIndex: 'nameCn', key: 'nameCn' },
        { title: '路径', dataIndex: 'path', key: 'path' },
        { title: '组件', dataIndex: 'component', key: 'component' },
        { title: '重定向', dataIndex: 'redirect', key: 'redirect' },
        { title: '图标', dataIndex: 'icon', key: 'icon' },
        { title: '父组件', dataIndex: 'parent_name', key: 'parent_name' },
        { title: '目标', dataIndex: 'target', key: 'target' },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      menuList: [],
      menuOptionList: [],
      loading: false,
      visible: false,
      queryParams: {
        page: 1,
        limit: 10
      },
      total: 0,
      current: undefined
    }
  },

  mounted () {
    this.getMenuList()
    this.getMenuOptionList()
  },
  methods: {
    async getMenuList () {
      this.loading = true
      const res = await getMenuList(this.queryParams)
      if (isNotEmptyList(res.data.data)) {
        this.menuList = res.data.data
        this.total = res.data.total || 0
      }
      this.loading = false
    },

    async getMenuOptionList () {
      const res = await getMenuList({ page: 1, limit: 999 })
      if (isNotEmptyList(res.data.data)) {
        this.menuOptionList = []
        res.data.data.map((item) => {
          this.menuOptionList.push({
            value: item.id,
            label: item.name + `${item.nameCn ? ` - ${item.nameCn}` : ''}`
          })
        })
      }
    },

    async saveMenu (values) {
      let res
      if (values.id) {
        // 编辑
        // values.modifier = 1
        res = await updateMenu(values)
      } else {
        // 新增
        res = await addMenu(values)
      }
      if (res) {
        this.$message.success(values.id ? '修改成功' : '添加成功')
        this.visible = false
        this.getMenuList()
        this.getMenuOptionList()
      }
    },

    async removeMenu (record) {
      console.log('record', record)
      const res = await deleteMenu(record.id)
      if (res) {
        this.$message.success('删除成功')
        this.getMenuList()
      }
    },
    handleOk (values) {
      console.log('values', values)
      this.saveMenu(values)
      this.visible = false
    },
    handleCancel () {
      this.visible = false
      this.current = undefined
    },
    changePage (current, pageSize) {
      this.queryParams.page = current
      this.getMenuList()
    },

    onShowSizeChange (current, pageSize) {
      this.queryParams.pageSize = pageSize
      this.getMenuList()
    },
    showModal (record) {
      if (record) {
        this.current = record
      }
      this.visible = true
    }
  }
}
</script>
